<template>
    <div class="form-group">
        <p class="cut_off"></p>
        <div class="text_center" @click="getPageUp()" v-if = "notFirst">前十名</div>
		<table width="100%" border="0" class="form-table">
			<thead>
				<tr>
					<th>排名</th>
					<th>姓名</th>
					<th>分数</th>
				</tr>
			</thead>
			<tbody>
			    <tr v-for="rank of beforeRankData" :class="{fc_red:rank.isThis}">
					<td>{{rank.rank}}</td>
					<td>{{rank.empName}}</td>
					<td>{{rank.score}}</td>
				</tr>
				<tr v-for="rank of countryRankList0" :class="{fc_red:rank.isThis}">
					<td>{{rank.rank}}</td>
					<td>{{rank.empName}}</td>
					<td>{{rank.score}}</td>
				</tr>
				<tr v-for="rank of afterRankData" :class="{fc_red:rank.isThis}">
					<td>{{rank.rank}}</td>
					<td>{{rank.empName}}</td>
					<td>{{rank.score}}</td>
				</tr>
			</tbody>
		</table>
		<div class="text_center" @click="getPageDown" v-if = "notLast">后十名</div>
		<loading v-if="loadShow"></loading>
		<div class="no_data" v-if="hasNoData">
			<i class="ion ion-ios-paper-outline"></i>
			<p>暂无数据</p>
		</div>
	</div>	
</template>
<script type="text/javascript">
    import loading from '../../widget/loading.vue'
	export default{
		data(){
			return{
				'hasNoData':false,
				'countryRankList0':[],

				'beforeRankData':[],
				'beforePageCount':0,
				'beforePageTotal':'',
				'notFirst':false,

				'afterRankData':[],
				'afterPageCount':0,
				'afterPageTotal':'',
				'notLast':false,
				'isPageUp':false,
				'isPageDown':false,
				'loadShow':false
			}

		},
		mounted(){
			this.getTeamRankDatas();
		},
		components:{
			loading
		},
		methods:{
			getTeamRankDatas(){
				this.$http.get(this.$parent.countryListRankUrl,{emulateJSON:true,before(){
		          // 显示正在加载提示框
		          this.loadShow = true;
			    }})
				.then((response) =>{
					console.log(response);
					if(response.data != null){
						this.countryRankList0 = response.data[0].ipVOList;
						this.beforePageTotal = response.data[0].pageUpCount;
						this.afterPageTotal = response.data[0].pageDownCount;
						// console.log(this.beforePageTotal+"after--"+this.afterPageTotal);

						if(this.beforePageTotal>0){
							this.notFirst = true;
						}else{
							this.notFirst = false;
						}
						if(this.afterPageTotal>0){
							this.notLast = true;
						}else{
							this.notLast = false;
						}
						// console.log(this.notFirst);
						// console.log(this.notLast);
					}else{
						this.hasNoData = true;
					}
				}).finally(() => {
		          // 隐藏正在加载提示框
		          this.loadShow = false;
		        });
			},
			getPageUp(){
				if(this.isPageUp == false){
					this.isPageUp = true;
					let params ={
						empNo:this.$route.query.empNo,
						page:this.beforePageCount
					}
					this.$http.post(this.$parent.countryPageUpUrl,params,{emulateJSON:true,before(){
			          // 显示正在加载提示框
			          this.loadShow = true;
				    }})
					.then((response) =>{
						console.log(response);
						if(response.data != null){
							let resDatas = response.data;
							let resDatasLen = resDatas.length;
							if(resDatasLen > 0){
								for(let i=resDatas.length-1; i>=0;i--){
									this.beforeRankData.unshift(response.data[i]);
								}
								this.beforePageCount++;
								this.isPageUp = false;
								if(this.beforePageCount <= this.beforePageTotal-1){
									this.notFirst = true;
								}else{
									this.notFirst = false;
								}
							}
						}
					}).finally(() => {
			          // 隐藏正在加载提示框
			          this.loadShow = false;
			        });
				}
			},
			getPageDown(){
				if(this.isPageDown == false){
					this.isPageDown = true;
					let params ={
						empNo:this.$route.query.empNo,
						page:this.afterPageCount
					}
					this.$http.post(this.$parent.countryPageDownUrl,params,{emulateJSON:true,before(){
			          // 显示正在加载提示框
			          this.loadShow = true;
				    }})
					.then((response) =>{
						console.log(response);
						if(response.data != null){
							let resDatas = response.data;
							let resDatasLen = resDatas.length;
							if(resDatasLen > 0){
								for(let i=0; i<resDatasLen;i++){
									this.afterRankData.push(response.data[i])
								}
								this.afterPageCount++;
								this.isPageDown = false;

								if(this.afterPageCount < this.afterPageTotal){
									this.notLast = true;
								}else{
									this.notLast = false;
								}
							}
						}

					}).finally(() => {
			          // 隐藏正在加载提示框
			          this.loadShow = false;
			        });
				}
			}
		}
	}
</script>